%h1 Paginator tests

:plain
  <style type="text/css">
    .item { background: #333; display: inline; float: left; width: 80px; height: 80px; overflow: hidden; padding: 12px; margin: 0; }
    div.item.focused { background: #cef; }
    .item div { background: #eee; padding: 6px; height: 68px; font: bold 11px Arial sans-serif; }
    .paginator { margin-bottom: 30px; }
    .paginator-controls .previous, .paginator-controls .next { clear: left; width: 100px; padding: 2px 8px; border: 1px solid #000; cursor: pointer; }
    .paginator-controls .disabled { color: #ccc; }
    .pages span { float: left; width: 20px; padding: 2px 4px; border: 1px solid #666; margin: 10px 6px; cursor: pointer; }
    .paginator-controls .hovered { background: #ddd; }
    .pages span.selected { background: #cef; cursor: default }
    
    #items2 { width: 312px; }
    #items2box { position: absolute; left: 600px; top: 50px; }
    
    #ajaxy-container { margin-top: 30px; }
    #ajaxy .item { background: #fce; }
    #ajax-status { position: absolute; left: 600px; top: 500px; }
    
    /* Should not apply */
    #items { border: 4px solid red; padding: 10px; }
    .paginator { padding-top: 50px; }
    .paginator { border-bottom: 8px solid red; }
    
    #slider-bg { margin: 30px 0; position: relative; background:url(/images/bg-h.gif); height:26px; width:248px; }
    #slider-thumb { position: absolute; }
  </style>

#items
  .item
    %div Lorem ipsum
  .item
    %div Lorem ipsum
  .item
    %div Lorem ipsum
  .item
    %div Lorem ipsum
  .item
    %div Lorem ipsum
  .item
    %div Lorem ipsum
  .item
    %div Lorem ipsum
  .item
    %div Lorem ipsum
  .item
    %div Lorem ipsum
  .item
    %div Lorem ipsum
  .item
    %div Lorem ipsum
  .item
    %div Lorem ipsum
  .item
    %div Lorem ipsum
  .item
    %div Lorem ipsum
  .item
    %div Lorem ipsum
  .item
    %div Lorem ipsum

=javascripts *( %w(dragdrop slider).map { |s| "http://yui.yahooapis.com/2.5.2/build/#{s}/#{s}-min.js" } )

#slider-bg{:tabindex => "-1", :title => "Slider"}
  #slider-thumb
    =img 'thumb-bar.gif'

#items2box
  #items2
    .item
      %div Lorem ipsum
    .item
      %div Lorem ipsum
    .item
      %div Lorem ipsum
    .item
      %div Lorem ipsum
    .item
      %div Lorem ipsum
    .item
      %div Lorem ipsum
    .item
      %div Lorem ipsum
    .item
      %div Lorem ipsum
    .item
      %div Lorem ipsum
    .item
      %div Lorem ipsum
    .item
      %div Lorem ipsum
    .item
      %div Lorem ipsum
    .item
      %div Lorem ipsum
    .item
      %div Lorem ipsum
    .item
      %div Lorem ipsum
    .item
      %div Lorem ipsum

#ajax-container
  #ajaxy

#ajax-status

=javascripts 'test/paginator'
